<template>
  <el-drawer
    title="列表的meta"
    v-model="_gridOutInfo.isShow"
    :before-close="handleClose"
    destroy-on-close
  >
    <el-radio-group v-model="metaKind" size="mini">
      <el-radio-button label="grid"></el-radio-button>
      <el-radio-button label="find"></el-radio-button>
      <el-radio-button label="button"></el-radio-button>
      <el-radio-button label="forms"></el-radio-button>
    </el-radio-group>
    &nbsp;
    <el-radio-group v-model="formsId" size="mini">
      <el-radio-button
        v-for="item in formsMeta"
        :key="item"
        :label="item">
      </el-radio-button>
    </el-radio-group>
    <el-input
      :with-header="false"
      type="textarea"
      :rows="40"
      placeholder="请输入内容"
      v-model="gridMetaJson"
    ></el-input>
  </el-drawer>
</template>

<script>
/* eslint-disable import/no-absolute-path */

import { reactive, computed, ref } from 'vue'

// 轻量级状态
import { state } from 'nf-state'

/**
 * 导出列表meta，
 * 显示列表的meta form state
 * 存入 indexedDB
 * 存入 webSQL
 */
export default {
  name: 'grid-meta-out'
}
</script>

<script setup>

// 属性：模块ID
const props = defineProps({
  moduleId: [Number, String],
  gridOutInfo: Object
})

// meta的类型
const metaKind = ref('grid')

// 表单的ID
const formsId = ref(0)

// 定义列表的meta的json
const gridMetaJson = computed(() => {
  let re = null
  if (metaKind.value === 'forms') {
    re = state.adminMeta[props.moduleId].forms[formsId.value]
  } else {
    re = state.adminMeta[props.moduleId][metaKind.value]
  }
  return JSON.stringify(re, null, 2)
})

// 定义表单的种类
const formsMeta = computed(() => Object.keys(state.adminMeta[props.moduleId].forms))

const _gridOutInfo = props.gridOutInfo

const handleClose = (done) => {
  done()
  console.log(done)
  const handleClose = (done) => {
    ElMessageBox
      .confirm('确认关闭')
      .then((_) => {
        done()
      })
      .catch((_) => {})
  }
}

</script>
